<template>
<view class="login-container">
<!-- 提示登录的图标 -->
<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
<!-- 登录按钮 -->
<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
<button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>
<!-- 登录提示 -->
<view class="tips-text">登录后尽享更多权益</view>
</view>
</template>

<script>
// 按需导入辅助函数
import { mapMutations, mapState } from 'vuex'
export default {
computed: {
// 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
...mapState('m_user', ['redirectInfo']),
},
	data() {
	return {}
	},
	methods: {
	// 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用
	...mapMutations('m_user', ['updateUserInfo', 'updateToken',
	'updateRedirectInfo']),
	// 获取微信用户的基本信息
	// 获取微信用户的基本信息
	// 获取微信用户的基本信息
	getUserProfile(e){
	            uni.getUserProfile({
	              desc: '用于完善个人资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
	              success: (res) => {
	                // 3. 将用户的基本信息存储到 vuex 中
	              this.updateUserInfo(res.userInfo)
	              
	              // 获取登录成功后的 Token 字符串
	              this.getToken(res)
	              },
	               fail: (res) => {
	                    return uni.$showMsg('您取消了登录授权')
	                  }
	            })
	},
	// 调用登录接口，换取永久的 token
	async getToken(info) {
	// 调用微信登录接口
	const res = await uni.login().catch(err => err)
	// 判断是否 wx.login() 调用失败
	if (res.errMsg !== 'login:ok') return uni.$showError('登录失败！')
	// 准备参数对象
	const query = {
	code: res.code,
	encryptedData: info.encryptedData,
	iv: info.iv,
	rawData: info.rawData,
	signature: info.signature
	}
	// 换取 token
	const { data: loginResult } = await
	uni.$http.post('/api/public/v1/users/wxlogin', query)
	if (loginResult.meta.status !== 400) return uni.$showMsg('登录失败！')
	// 2. 更新 vuex 中的 token
	this.updateToken("Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo")
	this.navigateBack()
	},
	// 返回登录之前的页面
	navigateBack() {
	// redirectInfo 不为 null，并且导航方式为 switchTab
	if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
	// 调用小程序提供的 uni.switchTab() API 进行页面的导航
	uni.switchTab({
	// 要导航到的页面地址
	url: this.redirectInfo.from,
	// 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
	complete: () => {
	this.updateRedirectInfo(null)
	}
	})
	}
	}
	},
	}
</script>

<style lang="scss">
.login-container {
// 登录盒子的样式
height: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f8f8f8;
position: relative;
overflow: hidden;
// 绘制登录盒子底部的半椭圆造型
&::after {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 40px;
left: 0;
bottom: 0;
background-color: white;
border-radius: 100%;
transform: translateY(50%);
}
// 登录按钮的样式
.btn-login {
width: 90%;
border-radius: 100px;
margin: 15px 0;
background-color: #c00000;
}
// 按钮下方提示消息的样式
.tips-text {
font-size: 12px;
color: gray;
}
}
</style>